<template>
  <el-dialog :title="title" :visible.sync="dialogVisible" width="600px" append-to-body>
      <el-form ref="form" :model="model" :rules="rules" inline label-width="110px" label-suffix=":" class="batch-edit-class">
          <template v-if="type==='barcode'">
            <el-form-item label="手动填写" prop="barcode">
              <el-input v-model.trim="model.barcode" placeholder="" clearable></el-input>
          </el-form-item>
          </template>
          <template v-else-if="type==='price'">
            <el-form-item label="直接修改为" prop="price">
                <el-input v-model.trim="model.price" placeholder="" clearable></el-input>
            </el-form-item>
          </template>
          <template v-else-if="type==='compare_at_price'">
            <el-form-item label="直接修改为" prop="compare_at_price">
                <el-input v-model.trim="model.compare_at_price" placeholder="" clearable></el-input>
            </el-form-item>
          </template>
          <template v-else-if="type==='inventory_quantity'">
            <el-form-item label="直接修改为" prop="inventory_quantity">
                <el-input v-model.trim="model.inventory_quantity" placeholder="" clearable></el-input>
            </el-form-item>
          </template>
          <template v-else-if="type==='inventory_support'">
            <el-form-item label="直接修改为" prop="inventory_support">
                <el-select v-model="model.inventory_support" placeholder="">
                  <el-option label="支持负库存购买" :value="1"></el-option>
                  <el-option label="不支持负库存购买" :value="2"></el-option>
                  <el-option label="不填写库存" :value="3"></el-option>
                </el-select>
            </el-form-item>
          </template>
          <template v-else-if="type==='weight'">
            <el-form-item label="直接修改为" prop="weight">
                <el-input v-model.trim="model.weight" placeholder="" clearable>
                  <span slot="append">kg</span>
                </el-input>
            </el-form-item>
          </template>
      </el-form>
      <div slot="footer" class="dialog-footer">
          <el-button type="primary" :loading="save" :disabled="save" @click="submit">确 定</el-button>
          <el-button @click="cancel">取 消</el-button>
      </div>
  </el-dialog>
</template>

<script>

export default {
  name: 'BatchEditDialog',
  props: {
    value: {
      type: Boolean,
      default: false,
    },
      type: {
          type: String,
          default: '',
      },
  },
  data() {
      return {
          model: {
            barcode: undefined,
            price: undefined,
            compare_at_price: undefined,
            inventory_quantity: undefined,
            inventory_support: 1,
            weight: undefined,
          },
          rules: {
              
          },
          dict: {
              platformList: [],
              shopList: [],
              salesmanList: [],
          },
          save: false,
      }
  },
  computed: {
      title() {
        const titleMap = {
          barcode: '批量编辑',
          price: '修改价格',
          compare_at_price: '修改建议零售价',
          inventory_quantity: '修改库存',
          inventory_support: '修改库存支持',
          weight: '修改重量'
        }
          return `${titleMap[this.type]}`
      },
      dialogVisible: {
          get() {
              return this.value
          },
          set(val) {
              this.$emit('input', val)
          },
      },
  },
  watch: { },
   mounted() { },
  methods: {
      submit() {
          this.$refs.form.validate(valid => {
              if (!valid) {
                  return
              }

              this.$emit('change', { key:[this.type], value: this.model[this.type]})
              this.cancel()
          })
      },
      cancel() {
          this.dialogVisible = false
      },
  },
}
</script>

<style lang="scss" scoped>
::v-deep {
  .batch-edit-class {

    .el-form-item {
      
      .el-form-item__content {
        width: auto;
      }
    }
  }
}
</style>